// Copyright © 2019 The Things Network Foundation, The Things Industries B.V.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

.container
  input-width-classes()
  // Overwriting react-select styling in global scope.

  // stylelint-disable
  :global(.select__input-container)
    color: var(--c-text-neutral-heavy)
  :global(.select__single-value)
    color: light-dark(inherit, var(--c-text-neutral-heavy))
  :global(.select__option)
    padding: $cs.xs $cs.s
  :global(.select__option--is-selected)
    background-color: var(--c-text-brand-normal)
  :global(.select__option--is-focused:not(.select__option--is-selected))
    background-color: light-dark(var(--c-bg-neutral-semilight), var(--c-bg-neutral-normal))
  :global(.select__control--is-focused)
    box-shadow: none
    border-color: var(--c-text-brand-normal)
    color: var(--c-bg-neutral-max)

  :global(.select__control)
    width: 100%
    min-height: $default-input-height
    border-radius: $br.xs
    border: 1px solid var(--c-border-neutral-normal)
    background: var(--c-bg-neutral-min)
  :global(.select__menu)
    background: light-dark(var(--c-bg-neutral-min), var(--c-bg-neutral-light))
    z-index: $zi.dropdown
  :global(.select__dropdown-indicator)
    padding: 4px
  :global(.select__value-container)
    padding: 0 8px
    white-space: nowrap
  :global(.select__clear-indicator)
    cursor: pointer

    div:last-child
      padding:0 !important

  &.error
    :global(.select__control)
      color: var(--c-bg-error-normal)
      border-color: var(--c-bg-error-normal)

    :global(.select__control--is-focused)
      box-shadow: var(--shadow-box-error-normal)

  &.warning
    :global(.select__control)
      color: var(--c-bg-warning-normal)
      border-color: var(--c-bg-warning-normal)

    :global(.select__control--is-focused)
      box-shadow: var(--shadow-box-error-normal)

  &.selected-options-container
    display: inline-block

    .remove-option-button
      float: right
  // stylelint-enable
